<template>
  <div class="container">
    <!-- 预览弹框 -->
    <el-dialog
      title="题目预览"
      :visible="dialogVisible"
      @close="closegb"
      width="60%"
    >
      <!-- 表单 -->
      <el-form>
        <div class="a">
          <span class="a1">{{
            `【题型】: ${this.questionTypes[formData.questionType]}`
          }}</span>
          <span class="a2">{{ `【编号】: ${formData.id}` }}</span>
          <span class="a3">{{
            `【难度】: ${this.difficultys[formData.difficulty]}`
          }}</span>
          <span class="a4">{{ `【标签】: ${formData.tags}` }}</span>
        </div>
        <div class="b">
          <span class="b1">{{ `【学科】: ${formData.subjectName}` }}</span>
          <span class="b2">{{ `【目录】: ${formData.directoryName}` }}</span>
          <span class="b3">{{ `【方向】: ${formData.direction}` }}</span>
        </div>
        <hr />
        <!-- 题干 -->
        <div class="question">
          【题干】:
          <span style="color: blue">{{ html2Text(formData.question) }}</span>
        </div>
        <!-- 选择 -->
        <div>
          <!-- 单选 -->
          <div v-if="choose <= 1">
            <span>{{
              `${this.questionTypes[formData.questionType]}` +
              "选项:(以下选中的选项为正确答案)"
            }}</span>
            <br />
            <br />
            <el-radio-group
              v-model="danxuan"
              @click.native.prevent
              style="display: block"
            >
              <el-radio
                :v-model="item.id"
                v-for="item in optionList"
                :key="item.id"
                :label="item.isRight"
                style="width:400px,hight:300px"
                >{{ item.title }}</el-radio
              >
            </el-radio-group>
          </div>
          <!-- 多选 -->
          <div v-else-if="choose > 1 && choose <= 2">
            <span>{{
              `${this.questionTypes[formData.questionType]}` +
              "选项:(以下选中的选项为正确答案)"
            }}</span>
            <br />
            <br />
            <el-checkbox-group @click.native.prevent v-model="optionList2">
              <el-checkbox
                style="display: block"
                v-for="item in optionList"
                :key="item.id"
                :label="item"
                >{{ item.title }}</el-checkbox
              >
            </el-checkbox-group>
          </div>
          <!-- 简答 -->
          <hr />
          <div>
            【参考答案】:
            <el-button type="danger" @click="videoPlayback"
              >视频答案预览</el-button
            >
            <div class="videoURL" ref="videoRef">
              <video-player
                class="video-player vjs-custom-skin"
                ref="videoPlayer"
                :playsinline="true"
                :options="playerOptions"
              ></video-player>
            </div>
          </div>
          <hr />
          <div>
            【答案解析】:
            {{ html2Text(formData.answer) }}
          </div>
          <hr />
          <div>
            【参考备注】:
            {{ formData.remarks }}
          </div>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closegb">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { html2Text } from '@/utils/index.js'
export default {
  name: 'QuestionsPreview',
  data () {
    return {
      // 视频播放
      playerOptions: {
        playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
        autoplay: false, // 如果true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: 'zh-CN',
        aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [
          {
            // type: '',
            src: '' // url地址 https://vkceyugu.cdn.bspapp.com/VKCEYUGU-learning-vue/52e63a10-aecd-11ea-b43d-2358b31b6ce6.mp4
            // src: "" //url地址
          }
        ],
        poster: '', // 你的封面地址
        // width: document.documentElement.clientWidth,
        notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true,
          durationDisplay: true,
          remainingTimeDisplay: false,
          fullscreenToggle: true // 全屏按钮
        }
      },
      questionTypes: {
        1: '单选',
        2: '多选',
        3: '简答'
      },
      difficultys: {
        1: '简单',
        2: '一般',
        3: '困难'
      },
      question: '',
      optionList: [],
      optionList2: [],
      danxuan: 1,
      videoURL: null,
      choose: 0
    }
  },
  props: {
    dialogVisible: {
      type: Boolean
    },
    // 题型
    questionType: {
      type: String
    },
    // 表单数据
    formData: {
      type: Object,
      default: () => { }
    }
  },
  methods: {
    // 关闭回调
    closegb () {
      this.$emit('closegb', { a: 2 })
      this.$refs.videoRef.className = 'videoURL'
      this.playerOptions.sources[0].src = ''
    },
    // 题干格式化
    html2Text (a) {
      return html2Text(a)
    },
    videoPlayback () {
      this.$refs.videoRef.className = 'videoURLs'
    }
  },
  watch: {
    formData (news, olds) {
      this.optionList = news.options
      this.playerOptions.sources[0].src = news.videoURL
      // console.log(this.playerOptions.sources[0])
      this.choose = news.questionType
      this.optionList.forEach(item => {
        if (item.isRight === 1) {
          this.optionList2.push(item)
        }
      })
      console.log(this.optionList2)
    }
  }
}
</script>

<style scoped lang="less" >
.el-radio {
  display: block;
  line-height: 23px;
  white-space: normal;
  margin-right: 0;
}

.el-form .a,
.b {
  display: flex;
  margin-bottom: 15px;
}
.a1,
.a2,
.a3,
.a4 {
  flex: 1;
}
.b1,
.b2,
.b3 {
  flex: 0.25;
}
.question {
  margin: 15px 0px;
}
.videoURL {
  display: none;
}
.videoURLs {
  display: block;
}
</style>
